<template>
<el-container style="height: 100vh">
<el-aside width="200px" class="sidebar">
<div class="logo">外卖后台</div>
<el-menu router :default-active="$route.path" class="menu">
<el-menu-item index="/dashboard/products">商品管理</el-menu-item>
<el-menu-item index="/dashboard/orders">订单管理</el-menu-item>
<el-menu-item index="/dashboard/statistics">销售统计</el-menu-item>
<el-menu-item index="/dashboard/customers">客人管理</el-menu-item>
<el-menu-item index="/dashboard/couriers">配送员管理</el-menu-item>
</el-menu>
</el-aside>
<el-container>
<el-header class="header">
<span>商家后台系统</span>
<el-button type="danger" size="mini" @click="logout">退出登录</el-button>
</el-header>
<el-main class="main"><router-view/></el-main>
</el-container>
</el-container>
</template>

<script>
export default {
methods: {
logout() {
this.$store.commit('logout')
this.$router.push('/login')
}
}
}
</script>

<style scoped>
@import '@/assets/theme.css';
.sidebar { background:var(--color-sidebar); color:#fff; }
.logo { height:60px; line-height:60px; text-align:center;
font-size:20px; background:var(--color-sidebar-active); margin-bottom:10px; }
.menu .el-menu-item { margin:8px 0; border-radius:4px; }
.menu .el-menu-item:hover { background:var(--color-sidebar-active); }
.menu .el-menu-item.is-active { background:var(--color-accent); color:#fff; font-weight:bold; }
.header { display:flex;justify-content:space-between;align-items:center;
background:var(--color-header);box-shadow:0 2px 8px var(--color-card-shadow); padding:0 20px; }
.main { padding:20px; background:var(--color-bg); }
</style>